<script lang="ts">
	import Dialog, { Title, Content, Actions, InitialFocus } from '@smui/dialog';
	import Button, { Label } from '@smui/button';
	import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
	import { createEventDispatcher } from 'svelte';
	import { Divider } from '$components/basic';
	import Tab, { Label as TabLabel } from '@smui/tab';
	import TabBar from '@smui/tab-bar';
	import Textfield from '@smui/textfield';
	import Checkbox from '@smui/checkbox';
	import { shallowClone } from '$utils/clone';
	import { alova } from '$utils/request';
	import { createMessage } from '$components/basic/message';
	import List, { Item, Graphic, Separator, Text } from '@smui/list';
	import { getValue } from '$utils/get';
	import { goto } from '$utils/intercept';

	const dispatcher = createEventDispatcher();

	let open = false;
	let newList: any[] = [];
	let overList: any[] = [];

	export let title = 'Edit Address';
	export function init(date: string, orders: any[]) {
		newList = orders[0];
		overList = orders[1];
		open = true;
	}

	const dataArray = [
		{ span: 8, type: 'text', label: 'Continent: ', value: 'aCont' },
		{ span: 8, type: 'text', label: 'Country: ', value: 'aCountry' },
		{ span: 8, type: 'text', label: 'Province: ', value: 'aProvince' },
		{ span: 8, type: 'text', label: 'City: ', value: 'aCity' },
		{ span: 16, type: 'text', label: 'Detail: ', value: 'aDetail' },
		{ span: 8, type: 'text', label: 'First Name: ', value: 'fName' },
		{ span: 8, type: 'text', label: 'Last Name: ', value: 'lName' },
		{ span: 8, type: 'text', label: 'Email: ', value: 'email' },
		{ span: 8, type: 'text', label: 'Postcode: ', value: 'postcode' },
		{ span: 8, type: 'text', label: 'Phone: ', value: 'phone' },
		{ span: 8, type: 'text', label: 'Count Number: ', value: 'countNum' },
		{ span: 8, type: 'text', label: 'Company Name: ', value: 'companyName' },
		{ span: 4, type: 'checkbox', label: 'Is Default: ', value: 'isDefault' },
		{ span: 4, type: 'checkbox', label: 'Private: ', value: 'private' }
	];

	const getDefault = () =>
		dataArray.reduce((acc, item) => {
			return { ...acc, [item.value]: item.type === 'checkbox' ? false : '' };
		}, {});

	export let address = getDefault();

	const on_confirm = async () => {
		await alova.Post('/member-address/edit', address);
		await dispatcher('fresh');
		createMessage({
			type: 'success',
			message: title.charAt(0) === 'A' ? 'Add Success' : 'Edit success',
			duration: 2000
		});
	};
	const on_cancel = () => (address = getDefault());
</script>

<Dialog
	bind:open
	fullscreen={true}
	aria-labelledby="simple-title"
	aria-describedby="simple-content"
	container$class="items-start!"
	surface$class="max-w-100% mt-150px"
>
	<Content id="simple-content">
		{#if newList.length}
			<Title>New Items</Title>
			<DataTable
				table$aria-label="User list"
				style="width: 100%;"
				class="mt-10px table-header-blue-1"
			>
				<Head>
					<Row>
						<Cell style="width: 100%;">Title</Cell>
						<Cell>Code</Cell>
						<Cell>Dash</Cell>
						<Cell>Create Date</Cell>
					</Row>
				</Head>
				<Body>
					{#each newList as item (item.id)}
						<Row on:click={() => goto('/detail/' + item.id)}>
							<Cell>{item.title}</Cell>
							<Cell>{item.code}</Cell>
							<Cell>{getValue(item, 'dash', '--')}</Cell>
							<Cell>{item.created_at}</Cell>
						</Row>
					{/each}
				</Body>
			</DataTable>
		{/if}
		{#if overList.length}
			<Title>Overtime Items</Title>
			<DataTable
				table$aria-label="User list"
				style="width: 100%;"
				class="table-header-red-1 mt-10px"
			>
				<Head>
					<Row>
						<Cell style="width: 100%;">Title</Cell>
						<Cell>Code</Cell>
						<Cell>Dash</Cell>
						<Cell>Ship Date</Cell>
					</Row>
				</Head>
				<Body>
					{#each overList as item (item.id)}
						<Row on:click={() => goto('/detail/' + item.id)}>
							<Cell>{item.title}</Cell>
							<Cell>{item.code}</Cell>
							<Cell>{getValue(item, 'dash', '--')}</Cell>
							<Cell>{item.ship_at}</Cell>
						</Row>
					{/each}
				</Body>
			</DataTable>
		{/if}
	</Content>
	<Actions class="pr-20px">
		<Button on:click={() => (open = false)} variant="raised" use={[InitialFocus]} style="">
			<Label>close</Label>
		</Button>
	</Actions>
</Dialog>
